<template>    
    <a-table rowKey="id" :dataSource="dataList" :pagination="pagination" :bordered="true" :columns="columns">
        <template #userid="{record}">
            {{record['username']}}(用户id:{{record.userid}})
        </template>
        <template #money="{record}">
            {{record['money']*0.01}}元
        </template>
         
    </a-table>
</template>
<script>
import { defineComponent, reactive } from 'vue'
import { message } from 'ant-design-vue';
import { payList } from '@/api/data';


export default defineComponent({
    setup() {
        const dataList=reactive([]);
        const columns=[
            {
                title:'id',
                dataIndex:'id',
                key:'id',
                align:'center',
                slots:{}
            },
            {
                title:'日期',
                dataIndex:'rq',
                key:'rq',
                align:'center',
                slots:{}
            },
            {
                title:'用户编号',
                dataIndex:'userid',
                key:'userid',
                align:'center',
                slots:{customRender:'userid'}
            },
            {
                title:'金额',
                dataIndex:'money',
                key:'money',
                align:'center',
                slots:{customRender:'money'}
            },
            {
                title:'支付订单号',
                dataIndex:'remove_trade_no',
                key:'remove_trade_no',
                align:'center',
                slots:{}
            },
            {
                title:'订单编号',
                dataIndex:'title',
                key:'title',
                align:'center',
                slots:{}
            }
        ];

        const pagination=reactive({
            total:0,
            page:1,
            defaultPageSize:15,
            onChange:(current,size)=>{
                pagination.page=current;
                getDataList();
            },
            showSizeChange:(current,size)=>{
                 pagination.defaultPageSize=size;
                 pagination.page=current;
                 getDataList();
            }
        });//分页组件

        const getDataList = () =>{
            payList({page:pagination.page,pageSize:pagination.defaultPageSize}).then(
                res=>{
                    if(res.data['code']==200){
                        dataList.length=0;                        
                        Object.assign(dataList,res.data['data']['dataList']);
                        pagination.total=res.data['data']['total'];
                        //console.log(res.data['data']['dataList']);

                    }else{
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);

                }
            )
        }

        getDataList();


        return{
            dataList,columns,pagination,getDataList
        }
    },
})
</script>
